<template lang="pug">
  div
    div.cycleTabWrapper
      div.tab-title-box
        a.tab-title(
          v-for="(tab, index) in tabs"
          :key="tab.key"
          :class="{active: curTab === tab.key}"
          :style="{'z-index': tabs.length - index}"
          @click="curTab = tab.key"
        ) {{tab.title}}
      .tab-content-box
        components(v-if="tabComponent" :is="tabComponent")
</template>
<script>
import { tabs } from './config'

export default {
  data () {
    return {
      tabs,
      curTab: this.$route.query.type || 'conservation'
    }
  },
  computed: {
    tabComponent () {
      return tabs.find(x => x.key === this.curTab)?.component
    }
  }
}
</script>
